<template lang="">
    <div>
        <div id="main" ref="main"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts/core';

    export default {
        name: 'RingCharts',
        props: ['item'],
        data() {
            return {
                myChart: '',
                option : {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'normal'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                /* { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' } */
                            ]
                        }
                    ]
                }
            }
        },
        watch: {
            item(newValue) {
                this.option.series[0].data = newValue.option
                this.$nextTick(() => {
                    this.myChart.setOption(this.option);
                })
            }
        },
        methods: {
            resize() {
                this.myChart.resize();
            }
        },
        mounted() {
            var chartDom = this.$refs.main;
            this.myChart = echarts.init(chartDom);
            this.option.series[0].data = this.item.option
            this.option.series[0].name = this.item.queQue
            console.log(this.item.option);
            this.myChart.setOption(this.option, true);
            window.addEventListener("resize", this.resize);
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resize)
        },
    }
</script>
<style scoped>
    #main {
        height: 350px;
        width: 700px;
        margin: 0 auto;
    }
</style>